<template>
	<view class="industry">
		<Navbar>产业</Navbar>
		<scroll-view scroll-y class="scroll_view">
			<view class="content">
				<view class="attribute">
					<view class="info">
						<view class="avatar">
							<image :src="career_avatar"></image>
						</view>
						<view class="info_view">
							<view class="title">
								<view class="label">{{career_text}}</view>
								<view class="vip" v-if="is_vip">
									<image :src="`${baseImageUrl}/add/vip.png`"></image>
								</view>
							</view>
							<view class="item">
								<image :src="`${baseImageUrl}/home/icon1.png`"></image>
								<view>等级：{{role_level_name}}</view>
							</view>
							<view class="item">
								<image :src="`${baseImageUrl}/home/icon2.png`"></image>
								<view>{{field_key}}：{{field_value}}</view>
							</view>
						</view>
					</view>
					<view class="panel">
						<view class="item">
							<view class="name">
								<image :src="`${baseImageUrl}/home/s1.png`" class="key_icon"></image>
								<text class="key">饱食值</text>
							</view>
							<view class="progress_view">
								<view class="progress" :style="{width:satiety>100?100:satiety+'%'}"></view>
								<view class="text">{{satiety}}/100</view>
							</view>
							<view class="add" @click="query_five('satiety','饱食值')">
								<image :src="`${baseImageUrl}/common/add1.png`"></image>
							</view>
							<view class="add" @click="add_all('satiety')">
								<image src="@/static/images/add/bc1.png"></image>
							</view>
						</view>
						<view class="item">
							<view class="name">
								<image :src="`${baseImageUrl}/home/s2.png`" class="key_icon"></image>
								<text class="key">安全值</text>
							</view>
							<view class="progress_view">
								<view class="progress" :style="{width:secure>100?100:secure+'%'}"></view>
								<view class="text">{{secure}}/100</view>
							</view>
							<view class="add" @click="query_five('secure','安全值')">
								<image :src="`${baseImageUrl}/common/add1.png`"></image>
							</view>
							<view class="add" @click="add_all('secure')">
								<image src="@/static/images/add/bc1.png"></image>
							</view>
						</view>
						<view class="item">
							<view class="name">
								<image :src="`${baseImageUrl}/home/s3.png`" class="key_icon"></image>
								<text class="key">安居值</text>
							</view>
							<view class="progress_view">
								<view class="progress" :style="{width:settle_down>100?100:settle_down+'%'}"></view>
								<view class="text">{{settle_down}}/100</view>
							</view>
							<view class="add" @click="query_five('settle_down','安居值')">
								<image :src="`${baseImageUrl}/common/add1.png`"></image>
							</view>
							<view class="add" @click="add_all('settle_down')">
								<image src="@/static/images/add/bc1.png"></image>
							</view>
						</view>
						<view class="item">
							<view class="name">
								<image :src="`${baseImageUrl}/home/s4.png`" class="key_icon"></image>
								<text class="key">幸福值</text>
							</view>
							<view class="progress_view">
								<view class="progress" :style="{width:happiness>100?100:happiness+'%'}"></view>
								<view class="text">{{happiness}}/100</view>
							</view>
							<view class="add" @click="query_five('happiness','幸福值')">
								<image :src="`${baseImageUrl}/common/add1.png`"></image>
							</view>
							<view class="add" @click="add_all('happiness')">
								<image src="@/static/images/add/bc1.png"></image>
							</view>
						</view>
						<view class="item">
							<view class="name">
								<image :src="`${baseImageUrl}/home/s5.png`" class="key_icon"></image>
								<text class="key">温暖值</text>
							</view>
							<view class="progress_view">
								<view class="progress" :style="{width:warm>100?100:warm+'%'}"></view>
								<view class="text">{{warm}}/100</view>
							</view>
							<view class="add" @click="query_five('warm','温暖值')">
								<image :src="`${baseImageUrl}/common/add1.png`"></image>
							</view>
							<view class="add" @click="add_all('warm')">
								<image src="@/static/images/add/bc1.png"></image>
							</view>
						</view>
					</view>
					<view class="btn_view">
						<view class="btn_box">
							<view @click="open(1)">人物升级</view>
							<view @click="open(7)">我的宠物</view>
							<view @click="router('/pages/my/build')">我的建筑</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="item in list">
						<view class="other" v-if="item.need_unlock==0&&!item.user_industry" @click="id=item.id,open(6)">
							<image :src="`${baseImageUrl}/common/add2.png`" class="add"></image>
							<text>添加</text>
						</view>
						<view class="other" v-else-if="item.need_unlock==1" @click="unlock(item)">
							<image :src="`${baseImageUrl}/common/unlock.png`"></image>
							<text>解锁</text>
						</view>
						<view class="item_view" v-else-if="item.need_unlock==0&&item.user_industry"
							@click="query_collect(item)">
							<view class="produce" v-if="item.user_industry.can_receive_new==1">
								<image :src="`${baseImageUrl}/apng/foodstuffs.png`" v-if="field=='foodstuff'"></image>
								<image :src="`${baseImageUrl}/apng/cloths.png`" v-else-if="field=='cloth'"></image>
								<image :src="`${baseImageUrl}/apng/titledeeds.png`" v-else-if="field=='titledeed'">
								</image>
								<image :src="`${baseImageUrl}/apng/musics.png`" v-else-if="field=='music'"></image>
								<image :src="`${baseImageUrl}/apng/escorts.png`" v-else></image>
							</view>
							<view class="produce" v-else>
								<image :src="`${baseImageUrl}/apng/foodstuff.png`" v-if="field=='foodstuff'"></image>
								<image :src="`${baseImageUrl}/apng/cloth.png`" v-else-if="field=='cloth'"></image>
								<image :src="`${baseImageUrl}/apng/titledeed.png`" v-else-if="field=='titledeed'">
								</image>
								<image :src="`${baseImageUrl}/apng/music.png`" v-else-if="field=='music'"></image>
								<image :src="`${baseImageUrl}/apng/escort.png`" v-else></image>
							</view>
							<view class="grade">
								<view class="box">
									<text class="key">Lv</text>
									<text class="value">{{item.user_industry.order.industry_level}}</text>
								</view>
							</view>
							<image :src="item.user_industry.order.product_cover" class="cover"></image>
							<view class="name">
								<text>{{item.name}}</text>
								<text v-if="item.user_industry.order.alchemy_id>0">(熔炼)</text>
							</view>
							<view class="deta">
								<view>耐久度：{{item.user_industry.order.durability}}/100</view>
								<view>已产出：{{item.user_industry.output_total}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<Career :field_text="field_text" @close="close" v-if="popup==1" />
			<Unlock :id="id" :number="number" @close="close" @success="popup=4" @fail="popup=3" v-if="popup==2" />
			<UnlockFail @close="close" v-if="popup==3" />
			<UnlockSuccess @close="close" v-if="popup==4" />
			<ProduceDeta :id="id" @close="close" v-if="popup==5" />
			<Make :id="id" @close="close" v-if="popup==6" />
			<CarryPet :id="id" @close="close" v-if="popup==7" />
		</u-popup>

		<u-popup :show="tell_show" bgColor="transparent" mode="center">
			<PopupTell :type="tell_type" :title="tell_title" :tell_advert="tell_advert" :tell_text="tell_text"
				@close="tell_show=false" @submit="submit" />
		</u-popup>
	</view>
</template>

<script>
	import {
		career,
		field as field_list,
		// captchaAppId
	} from '@/utils/config.js';
	import {
		industryIndex,
		industryReceive,
		userFiveAdd,
		advertCan,
		userFiveAddall
	} from '@/request/api.js';
	import PopupTell from '@/components/common/PopupTell.vue';
	import Career from '@/components/home/Career.vue';
	import Unlock from '@/components/home/Unlock.vue';
	import UnlockFail from '@/components/home/UnlockFail.vue';
	import UnlockSuccess from '@/components/home/UnlockSuccess.vue';
	import ProduceDeta from '@/components/home/ProduceDeta.vue';
	import Make from '@/components/home/Make.vue';
	import CarryPet from '@/components/home/CarryPet.vue';

	export default {
		components: {
			PopupTell,
			Career,
			Unlock,
			UnlockFail,
			UnlockSuccess,
			ProduceDeta,
			Make,
			CarryPet
		},
		data() {
			return {
				is_vip: 0,
				career_text: "",
				career_avatar: "",
				role_level_name: "",

				field_key: "",
				field_value: "",

				satiety: "",
				secure: "",
				settle_down: "",
				happiness: "",
				warm: "",

				field: "",

				list: [],

				id: null,
				number: 0,
				popup_show: false,
				popup: 1,

				field_text: "",


				five: "",
				tell_advert: "",
				tell_text: "",
				tell_type: "",
				tell_title: "",
				tell_show: false
			}
		},
		// onLoad() {
		// 	this.getList();
		// },
		onShow() {
			this.getList();
		},
		onHide() {
			this.popup_show = false;
			this.tell_show = false;
		},
		methods: {
			async getList() {
				let {
					user,
					industry,
					field,
					upgrade_field,
					level_next_upgrade
				} = await industryIndex();
				this.field = field;
				this.list = industry;

				this.is_vip = user.is_vip;
				this.satiety = user.satiety;
				this.secure = user.secure;
				this.settle_down = user.settle_down;
				this.happiness = user.happiness;
				this.warm = user.warm;

				this.role_level_name = user.role_level_name;

				const item = career[user.role_id];
				this.career_text = item.name;
				this.career_avatar = item.avatar;

				this.field_text = `${level_next_upgrade}${upgrade_field.field_name}`;

				this.field_key = field_list[field];
				this.field_value = user[field];
			},
			async query_five(five, type) {
				this.five = five;
				let env = this.$store.state.env;
				if (env != "android") {
					this.add();
					return false;
				}
				let {
					is_can
				} = await advertCan({
					extrainfo: 2
				});
				if (is_can) {
					this.tell_type = `2_${five}`;
					this.tell_title = `增加${type}`;
					this.tell_advert = "看广告,增属性!";
					this.tell_text = "消耗材料补充";
					this.tell_show = true;
					return false;
				}
				this.add();
			},
			async add() {
				await userFiveAdd({
					five: this.five
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					this.getList();
				}, 1000);
			},
			open(index) {
				this.popup = index;
				this.popup_show = true;
			},
			close() {
				this.popup_show = false;
				this.getList();
			},
			unlock(item) {
				this.number = item.need_silver;
				this.id = item.id;
				this.open(2);
			},
			async collect() {
				let id = this.id;
				await industryReceive({
					industry_id: id
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					this.getList();
				}, 1000);
			},
			async query_collect(item) {
				this.id = item.id;
				let can_receive = item.user_industry.can_receive_new;
				if (can_receive != 1) {
					this.open(5);
					return false;
				}
				let env = this.$store.state.env;
				if (env != "android") {
					this.collect();
					return false;
				}
				let {
					is_can
				} = await advertCan({
					extrainfo: 1
				});
				if (is_can) {
					this.tell_type = 1;
					this.tell_title = "建筑物收取";
					this.tell_advert = "看广告,免五维!";
					this.tell_text = "直接收取";
					this.tell_show = true;
					return false;
				}
				this.collect();
			},
			submit() {
				this.tell_show = false;
				this.popup_show = false;
				if (this.tell_type == 1) {
					this.collect();
				} else {
					this.add();
				}
			},
			async add_all(five) {
				await userFiveAddall({
					five
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					this.getList();
				}, 1000);
			}
		}
	}
</script>

<style scoped lang="scss">
	.industry {
		min-height: 100vh;
		background: #29170D;

		.scroll_view {
			font-family: LiSu;
			height: calc(100vh - #{$navbarHeight});
			padding-top: 15rpx;
			box-sizing: border-box;

			.content {
				.attribute {
					width: 100%;
					padding: 20rpx 85rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/home/i1.png) no-repeat;
					background-size: 100% 100%;

					.info {
						width: 100%;
						height: 190rpx;
						display: flex;

						.avatar {
							width: 190rpx;
							height: 190rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.info_view {
							flex: 1;
							padding: 10rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.title {
								display: flex;
								align-items: center;

								.label {
									width: 180rpx;
									height: 54rpx;
									line-height: 54rpx;
									text-align: center;
									color: #494338;
									font-size: 40rpx;
									font-weight: 400;
									background: url(#{$baseImageUrl}/home/name.png) no-repeat;
									background-size: 100% 100%;
								}

								.vip {
									width: 50rpx;
									height: 50rpx;
									padding-left: 10rpx;
									box-sizing: content-box;

									image {
										width: 100%;
										height: 100%;
									}
								}
							}

							.item {
								display: flex;
								align-items: center;

								image {
									width: 44rpx;
									height: 44rpx;
								}

								view {
									color: #494338;
									font-size: 28rpx;
									font-weight: 400;
									font-family: SimSun;
									padding-left: 10rpx;
									box-sizing: border-box;
								}
							}
						}
					}

					.panel {
						padding: 25rpx 0 15rpx;
						box-sizing: border-box;

						.item {
							height: 50rpx;
							margin-bottom: 18rpx;
							padding-left: 15rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;


							.name {
								display: flex;
								align-items: center;

								.key_icon {
									width: 40rpx;
									height: 40rpx;
								}

								.key {
									color: #494338;
									font-size: 28rpx;
									font-weight: 400;
									font-family: SimSun;
								}
							}

							.progress_view {
								width: 256rpx;
								// width: 296rpx;
								height: 25rpx;
								margin: 0 20rpx;
								background: #B4A88E;
								box-shadow: 0px 0px 4px 0px rgba(110, 93, 72, 0.67);
								position: relative;

								.text {
									width: 100%;
									height: 25rpx;
									line-height: 25rpx;
									text-align: center;
									color: #494338;
									font-size: 24rpx;
									font-weight: 400;
									box-sizing: border-box;
									position: absolute;
									left: 0;
									top: 0;
									z-index: 2;
								}

								.progress {
									// width: 30%;
									height: 100%;
									background: linear-gradient(90deg, #E68B30, #FAD44C);
								}
							}

							.add {
								width: 50rpx;
								height: 50rpx;
								margin-right: 10rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}

					.btn_view {
						width: 100%;
						padding: 0 35rpx;
						box-sizing: border-box;

						.btn_box {
							width: 100%;
							border-top: 1px solid #fff;
							padding-top: 18rpx;
							display: flex;
							justify-content: space-between;

							view {
								width: 150rpx;
								height: 80rpx;
								line-height: 80rpx;
								text-align: center;
								color: #FFFFFF;
								font-size: 24rpx;
								font-weight: 400;
								font-family: SimSun;
								background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
								background-size: 100% 100%;
							}
						}
					}
				}

				.list {
					padding: 30rpx 60rpx;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						width: 300rpx;
						height: 332rpx;
						margin-bottom: 12rpx;
						background: url(#{$baseImageUrl}/common/item_300_332.png) no-repeat;
						background-size: 100% 100%;

						.other {
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							image {
								width: 250rpx;
								height: 130rpx;

								&.add {
									width: 80rpx;
									height: 80rpx;
								}
							}

							text {
								color: #494338;
								font-size: 30rpx;
								font-weight: 400;
								margin-top: 10rpx;
							}
						}

						.item_view {
							width: 100%;
							height: 332rpx;
							padding: 20rpx 30rpx;
							box-sizing: border-box;
							position: relative;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.produce {
								width: 100%;
								height: 100%;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 2;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.grade {
								width: 102rpx;
								height: 102rpx;
								padding-top: 28rpx;
								box-sizing: border-box;
								background: url(#{$baseImageUrl}/common/grade.png) no-repeat;
								background-size: 100% 100%;

								position: absolute;
								right: 0;
								top: 0;
								z-index: 2;

								.box {
									height: 42rpx;
									display: flex;
									justify-content: center;
								}

								.key {
									line-height: 55rpx;
									color: #4C2323;
									font-size: 22rpx;
									font-weight: 400;
									font-family: FZCuHeiSongS-B-GB;
								}

								.value {
									line-height: 42rpx;
									color: #4C2323;
									font-size: 42rpx;
									font-weight: 400;
									font-family: FZCuHeiSongS-B-GB;
								}
							}

							.cover {
								width: 100%;
								height: 173rpx;
							}

							.name {
								line-height: 1;
								text-align: center;
								color: #494338;
								font-size: 30rpx;
								font-weight: 400;
								font-family: LiSu;
							}

							.deta {
								view {
									color: #494338;
									font-size: 24rpx;
									font-weight: 400;
									margin-top: 10rpx;

									&:first-child {
										margin-top: 0;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>